<script setup>
import {CodeDiff} from "v-code-diff";
import {ref} from "vue";
import {Form, FormItem, Input, Option, Select} from "view-ui-plus";

defineOptions({
  name: 'StringDiff',
})

const content1 = ref('')
const content2 = ref('')
const contentLang = ref('plaintext')

const languageList = [
  "plaintext",
  "xml/html",
  "javascript",
  "json",
  "yaml",
  "python",
  "java",
  "bash",
  "sql"
]
</script>

<template>
  <div class="tool-container">
    <Form :label-width="60" inline>
      <FormItem label="内容1">
        <Input type="textarea" v-model="content1" placeholder="请输入内容1"></Input>
      </FormItem>
      <FormItem label="内容2">
        <Input type="textarea" v-model="content2" placeholder="请输入内容2"></Input>
      </FormItem>
      <FormItem label="语言">
        <Select v-model="contentLang" placeholder="请选择语言" filterable>
          <Option v-for="item in languageList" :label="item" :value="item" :key="item"></Option>
        </Select>
      </FormItem>
    </Form>
    <code-diff
      class="fixed-height-box"
      :old-string="content1"
      :new-string="content2"
      highlight
      :language="contentLang"
      output-format="side-by-side">
    </code-diff>
  </div>
</template>

<style scoped lang="scss">

</style>
